<script setup>
import {  ref, onMounted, computed } from 'vue'
// import avatar from '@/assets/image/avatar.png'
import { useRouter, useRoute } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { ElMessageBox, ElMessage } from 'element-plus';
import {getMenuByRole} from '@/utils/menu.js'
import { useBreadStore } from '@/stores/bread';
import Breadcrumb from '@/components/common/Breadcrumb.vue';
const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const breadStore = useBreadStore()
const breadList = computed({
  get:()=>([...breadStore.breadList]),
  set:(val)=>{breadStore.setBreadcrumbList(val)}
})
const menuItem = ref([])

const activeMenu = computed(() => {
  const { meta, path } = route
  return meta.activeMenu ? meta.activeMenu : path
})

// const headerTitle = () => {
//   const titles = []
//   route.matched[1]?.meta?.title && titles.push(route.matched[1]?.meta?.title )
//   route.matched[2]?.meta?.title && titles.push(route.matched[2]?.meta?.title )
//   console.log(titles.join(' - '))
//   return titles.join(' - ')
// }
const headerIcon = computed(() => {
 return menuItem.value.find(item => item.path == activeMenu.value)?.icon
})

const headerTitle = computed(() => {
 return menuItem.value.find(item => item.path == activeMenu.value)?.name
})

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    authStore.logout();
    router.push('/login');
    ElMessage.success('退出成功');
  }).catch(() => {
    ElMessage.info('已取消退出');
  });
};

onMounted(() => {
  const role = localStorage.getItem('role')
  menuItem.value = getMenuByRole(role)
})
</script>
<template>
  <div id="mainLayout">
     <el-container class="container flex-column">
    <!-- 目录 -->
    <el-container style="height: 100%;gap: 24px;">
      <el-aside width="240px">
        <div class="menu-top">
          <img src="@/assets/image/logo-full.png" width="50px" alt="Logo" class="logo">
          <div class="bold">AI课程平台管理系统</div>
          <div style="font-size: 10px;">AI Course Platform Management System</div>
        </div>
        <el-menu mode="vertical" class="el-menu-demo" style="background-color: #F2F1FE;" router :default-active="activeMenu" >
          <template v-for="(item,index) in menuItem" :key="index">
            <el-menu-item class="menu-item" :index="item.path" >
              <i class="iconfont" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <el-container style="background-color: white;border-radius: 48px; padding: 16px;">
        <el-header class="fixed-header">
          <template v-if="breadList.length==0">
            <i class="header-icon light iconfont " :class="headerIcon">
            </i>
            <div class="title">{{ headerTitle}}</div>
          </template>
          <Breadcrumb v-else></Breadcrumb>
          <i class="header-icon iconfont icon-tuichu cursor-p" style="margin-left: auto;" @click="handleLogout"></i>
          <img src="@/assets/image/avatar.jpg" class="photo">
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
  </div>
</template>
<style lang="less" scoped>
@import "@/assets/css/main.less";

.title {
  margin-left: 16px;
  color: #292E3D;
  font-weight: 700;
  font-size: 16px;
}

.header-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  line-height: 48px;
  text-align: center;
  color: rgba(41, 46, 61, 0.5);
  background: rgba(41, 46, 61, 0.05);
  font-size: 16px;

  &.light {
    background: #3040E80D;
    color: #3040E8;
  }
}

.dot {
  width: 4px;
  height: 4px;
  background-color: rgba(41, 46, 61, 0.25);
  border-radius: 50%;
}

.el-menu-item.is-active .dot {
  width: 16px;
  height: 16px;
  background: url("@/assets/icon/selected.svg");
}
</style>
